﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/lib/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Content/lib/layui/layui.js"></script>
</head>
<body>
    <div class="demoTable layui-form">
        留言者姓名
        <div class="layui-inline">
            <input class="layui-input" name="name" id="name" placeholder="留言者姓名" autocomplete="off">
        </div>
        创建时间:
        <div class="layui-inline">
            <input type="text" name="data" id="begin" placeholder="开始日期" autocomplete="off" class="layui-input">
        </div>
        -
        <div class="layui-inline">
            <input type="text" name="data" id="end" placeholder="结束日期" autocomplete="off" class="layui-input">
        </div>

        <button class="layui-btn" data-type="reload">搜索</button>

    </div>

    <table id="demo" lay-filter="test"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        layui.use(['table', 'laydate'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var $ = layui.$;
            var laydate = layui.laydate;

            //日期
            laydate.render({
                elem: '#begin'
            });
            laydate.render({
                elem: '#end'
            });
            //第一个实例
            table.render({
                elem: '#demo'
                , url: '/Message/Search' //数据接口
                , method: "post"
                , page: true //开启分页
                , cols: [[ //表头
                    { field: 'id', title: '编号', fixed: 'left' }
                    , { field: 'name', title: '留言者姓名' }
                    , { field: 'phone', title: '手机号' }
                    , { field: 'title', title: '反馈标题' }
                    , { field: 'content', title: '反馈内容' }
                    , { field: 'QQ', title: 'QQ号' }
                    , { field: 'email', title: '邮箱' }
                    , { fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo' } //这里的toolbar值是模板元素的选择器
                ]]
                , id: 'tid'
            });

            //工具条事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({
                            url: "/Message/Delect",
                            type: "post",
                            data: {
                                id: data.id
                            },
                            dataType: "json"

                        })
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });

                } else if (layEvent === 'edit') {
                    layer.open({        //原始核心方法
                        type: 2            //此处以iframe举例
                        , title: '查看信息详情'//标题
                        , area: ['800px', '500px']//宽高
                        , shade: 0.3         //弹层外区域。默认是0.3透明度的黑色背景
                        , content: '/Message/xingqing/' + data.id//路径 'Id'取自表头编号的单词
                    });
                }
            });

            active = {
                reload: function () {//查询

                    //执行重载
                    table.reload('tid', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {

                            name: $("#name").val(),
                            begin: $("#begin").val(),
                            end: $("#end").val()

                        }
                    });
                }
            }

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
</body>
</html>
